<template>
  <div :class="{'active': border && !disabled}" class="div-button-funtion noselect" @click="onClick">
    <slot>
      确认
    </slot>
  </div>
</template>

<script>

export default {
  name: 'DivButton',
  props: {
    border: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClick() {
      if (!this.disabled) {
        this.$emit('click')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .div-button-funtion {
    display: flex;
    align-items:center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    /*margin: 5px;*/
    padding: 5px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  }
  .div-button-funtion:hover{
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
  }
  .active {
    border: solid 1px rgba(1, 1, 1, 0.2);;
  }
</style>
